Security News
Django Joins curl in Pushing Back on AI Slop Security Reports
Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.
By Sarah Gooding - Jun 30, 2025
🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
What is vue-meta?
vue-meta is a Vue.js plugin that allows you to manage your app's metadata. This includes setting the title, meta tags, and other head elements dynamically based on the current route or component state.
What are vue-meta's main functionalities?
Setting Page Title
This feature allows you to dynamically set the page title for different routes or components.
{"metaInfo":{"title":"My Page Title"}}Setting Meta Tags
This feature allows you to dynamically set meta tags, such as description and Open Graph tags, for different routes or components.
{"metaInfo":{"meta":[{"name":"description","content":"This is a description of my page"},{"property":"og:title","content":"My Page Title"}]}}Setting Link Tags
This feature allows you to dynamically set link tags, such as canonical links, for different routes or components.
{"metaInfo":{"link":[{"rel":"canonical","href":"https://www.example.com/my-page"}]}}Other packages similar to vue-meta
react-helmet
react-helmet is a similar package for React applications. It allows you to manage changes to the document head, such as title and meta tags, in a declarative way. Compared to vue-meta, react-helmet is designed specifically for React and offers similar functionalities.
nuxt
Nuxt.js is a framework for creating Vue.js applications, and it includes built-in support for managing meta information through its `head` property in components. While Nuxt.js offers a broader range of features for server-side rendering and static site generation, its meta management capabilities are comparable to those of vue-meta.
vue-head
vue-head is another Vue.js plugin for managing the document head. It provides similar functionalities to vue-meta, such as setting the title and meta tags dynamically. However, vue-meta is generally more popular and has a larger community.
Manage HTML metadata in Vue.js components with SSR support
<template>
...
</template>
<script>
export default {
metaInfo: {
title: 'My Example App',
titleTemplate: '%s - Yay!',
htmlAttrs: {
lang: 'en',
amp: true
}
}
}
</script>
<html lang="en" amp>
<head>
<title>My Example App - Yay!</title>
...
</head>
Introduction
Vue Meta is a Vue.js plugin that allows you to manage your app's metadata. It is inspired by and works similar as react-helmet for react. However, instead of setting your data as props passed to a proprietary component, you simply export it as part of your component's data using the metaInfo property.
These properties, when set on a deeply nested component, will cleverly overwrite their parent components' metaInfo, thereby enabling custom info for each top-level view as well as coupling metadata directly to deeply nested subcomponents for more maintainable code.
Documentation
Please find the documention on https://vue-meta.nuxtjs.org
:globe_with_meridians: Please help us translate the documentation into your language, see here for more information
Examples
Looking for more examples what vue-meta can do for you? Have a look at the examples
Installation
Yarn
$ yarn add vue-meta
npm
$ npm install vue-meta --save
Download / CDN
Use the download links below - if you want a previous version, check the instructions at https://unpkg.com.
Latest version: https://unpkg.com/vue-meta/dist/vue-meta.min.js
Latest v1.x version: https://unpkg.com/vue-meta@1/dist/vue-meta.min.js
Uncompressed:
<script src="https://unpkg.com/vue-meta/dist/vue-meta.js"></script>
Minified:
<script src="https://unpkg.com/vue-meta/dist/vue-meta.min.js"></script>
Quick Usage
See the documentation for more information
import Vue from 'vue'
import VueMeta from 'vue-meta'
Vue.use(VueMeta, {
// optional pluginOptions
refreshOnceOnNavigation: true
})
Frameworks using vue-meta
If you wish to create your app even more quickly, take a look at the following frameworks which use vue-meta
- Nuxt.js - The Vue.js Progressive Framework
- Gridsome - The Vue.js JAMstack Framework
- Ream - Framework for building universal web app and static website in Vue.js
- Vue-Storefront - PWA for eCommerce
- Factor JS - Extension-first VueJS platform for front-end developers.
How to translate documentation
Thanks for your interest in translating the documentation. As our docs are based on VuePress, we recommend to have a look at their docs about internationalization as well
Here are the steps you will need to take:
- Clone this repository
- Create a new branch
- Browse to
/docs/ - Create a folder with the language code you will add a translation for (eg
/zh/) - Copy all
*.mdfiles and the foldersapi,faq, andguideto that folder - Translate the copied files in your language folder
- Edit
.vuepress/config.ymland add a config section for your locale in bothlocalesasthemeConfig.locales - Test your translation by running the docs dev server with
yarn docs - Create a pull request with your changes
- Receive eternal gratefulness from your fellow language speakers :heart:
Old versions
Click here if you are looking for the old v1 readme
License
FAQs
Manage HTML metadata in Vue.js components with ssr support
The npm package vue-meta receives a total of 396,494 weekly downloads. As such, vue-meta popularity was classified as popular.
We found that vue-meta demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Package last updated on 10 Jun 2020
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
ECMAScript 2025 Finalized with Iterator Helpers, Set Methods, RegExp.escape, and More
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
By Sarah Gooding - Jun 26, 2025
Security News
Node.js Homepage Adds Paid Support Link, Prompting Contributor Pushback
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.
By Sarah Gooding - Jun 25, 2025